<template>
  <div id="box">
    <button @click="handleAdd">添加</button>
    <table border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>出生日期</th>
          <th colspan="3">操作</th>
        </tr>
      </thead>
      <!-- 如果有数据就显示数据 -->
      <tbody v-if="stu.length > 0">
        <tr v-for="(item, index) in stu" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.sex }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.date | fromDate }}</td>
          <td>
            <span @click="handleDel(item, index)">删除</span>
            <span @click="handleXq(item, index)">详情</span>
            <span @click="handleEdit(item, index)">编辑</span>
          </td>
        </tr>
      </tbody>
      <!-- 否则显示暂无数据 -->
      <tbody v-else>
        <tr>
          <td colspan="6">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <p>共{{ stu.length }}条数据</p>

    <!-- 模态框 -->
    <div class="boxM" v-show="show">
      <div class="box-matter">
        <h4>
          {{ title }}
          <span @click="handleClose">X</span>
        </h4>
        <hr />
        <!-- 如果标题不是删除的时候显示编导你 -->
        <div class="from" v-if="title != '删除'">
          <!-- 当titke是详情的时候禁用 -->
          <p>
            姓名：<input
              type="text"
              placeholder="请输入姓名"
              v-model="obj.name"
              :disabled="title == '详情'"
            />
          </p>
          <p>
            性别：
            <label>
              <input
                :disabled="title == '详情'"
                type="radio"
                value="男"
                v-model="obj.sex"
              />男
            </label>
            <label>
              <input
                :disabled="title == '详情'"
                type="radio"
                value="女"
                v-model="obj.sex"
              />女
            </label>
          </p>
          <p>
            年龄：<input
              type="number"
              placeholder="请输入年龄"
              :disabled="title == '详情'"
              v-model="obj.age"
            />
          </p>
          <p>
            出生日期：<input
              type="date"
              :disabled="title == '详情'"
              v-model="obj.date"
            />
          </p>
          <p>
            <!-- 判断标题如果是新增就显示确定添加 -->
            <!-- 判断标题如果是编辑就显示确定编辑 -->
            <button v-if="title == '新增'" @click="handleTrue(1)">
              确定添加
            </button>
            <button v-if="title == '编辑'" @click="handleTrue(2)">
              确定编辑
            </button>
            <button @click="handleClose">取消</button>
          </p>
        </div>
        <div class="from" v-else>
          <p>
            <button @click="handleDelTrue">确定删除？</button>
            <button @click="handleClose">取消</button>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 默认隐藏模态框
      show: false,
      // 定义一个indexId
      indexId: null,
      // 标题
      title: "新增",
      obj: {
        name: "",
        age: "",
        sex: "男",
        date: "",
      },
      stu: [
        {
          name: "于海滨",
          age: 75,
          sex: "女",
          date: 15596139111,
        },
        {
          name: "郑致和",
          age: 27,
          sex: "男",
          date: 26596639111,
        },
        {
          name: "黄伟伟",
          age: 19,
          sex: "女",
          date: 1659948268000,
        },
      ],
    };
  },
  methods: {
    handleTrue(val) {
      // 如果val是1那么就是添加，否则就是编辑
      if (val == 1) {
        // 重组对象push到里面
        let s = {
          // key必须与数组中的属性一致，value可以不一致
          name: this.obj.name,
          age: this.obj.age,
          sex: this.obj.sex,
          date: this.obj.date,
        };
        // 添加完成之后
        this.stu.push(s);
        // 隐藏模态框
        this.show = false;
      } else {
        console.log(this.stu[this.indexId],"点击了编辑");
        // 将input中的内容赋值给stu数组中的内容
        // 首先我们要知道要修改的是哪条数据，修改的是当前点击对应下标的那个数据
        // 我们只需要将表单的数据赋值给当前点击对应下标的那个数据
        this.stu[this.indexId].name=this.obj.name
        this.stu[this.indexId].age=this.obj.age
        this.stu[this.indexId].sex=this.obj.sex
        this.stu[this.indexId].date=this.obj.date
        this.show=false
        
      }
    },
    // 点击添加的时候
    handleAdd() {
      // 显示模态框
      this.show = true;
      // 标题改为新增
      this.title = "新增";
      // 默认清空数据
      this.obj = {
        name: "",
        age: "",
        sex: "男",
        date: "",
      };
    },
    handleDel(row, index) {
      // 显示模态框
      this.show = true;
      // 标题改为删除
      this.title = "删除";
      // 将当前点击的下标存起来备用
      this.indexId = index;
    },
    handleDelTrue() {
      console.log(this.indexId, "取出来使用");
      // 删除当前点击的数据
      this.stu.splice(this.indexId, 1);
      // 删除之后隐藏模态框
      this.show = false;
    },
    handleXq(row, index) {
      // 显示模态框
      this.show = true;
      // 标题改为详情
      this.title = "详情";
      // 当我点击详情的时候，将当前行数据赋值给表单
      this.obj.name = row.name;
      this.obj.age = row.age;
      this.obj.sex = row.sex;
      // 前三个是时间戳无法赋值
      // 调用函数，将时间戳传进去，进行年月日的改变
      this.obj.date = this.dateTime(row.date);
    },
    handleEdit(row, index) {
      // 显示模态框
      this.show = true;
      // 标题改为编辑
      this.title = "编辑";
      // 当我点击编辑的时候，将当前行数据赋值给表单
      this.obj.name = row.name;
      this.obj.age = row.age;
      this.obj.sex = row.sex;
      // 前三个是时间戳无法赋值
      // 调用函数，将时间戳传进去，进行年月日的改变
      this.obj.date = this.dateTime(row.date);
      // 当我点击编辑的时候，将当前的下标存起来备用
      this.indexId=index
    },
    handleClose() {
      // 隐藏模态框
      this.show = false;
    },
    dateTime(val) {
      // 将时间戳改转为事件对象
      let date = new Date(val);
      // 将时间对象转为年月日时分秒
      // 获取年
      let yy = date.getFullYear();
      // 月份0-11 所以+1
      let mm = date.getMonth() + 1;
      mm = mm < 10 ? "0" + mm : mm;
      // 获取日
      let dd = date.getDate();
      dd = dd < 10 ? "0" + dd : dd;
      // 获取时分秒
      let hh = date.getHours();
      hh = hh < 10 ? "0" + hh : hh;
      let sm = date.getMinutes();
      sm = sm < 10 ? "0" + sm : sm;
      let ss = date.getSeconds();
      ss = ss < 10 ? "0" + ss : ss;
      // 将年月日时分秒返回出去
      //   return `${yy}-${mm}-${dd} ${hh}:${sm}:${ss}`
      return `${yy}-${mm}-${dd}`;
    },
  },
  filters: {
    fromDate(val) {
      // 将时间戳改转为事件对象
      let date = new Date(val);
      // 将时间对象转为年月日时分秒
      // 获取年
      let yy = date.getFullYear();
      // 月份0-11 所以+1
      let mm = date.getMonth() + 1;
      mm = mm < 10 ? "0" + mm : mm;
      // 获取日
      let dd = date.getDate();
      dd = dd < 10 ? "0" + dd : dd;
      // 获取时分秒
      let hh = date.getHours();
      hh = hh < 10 ? "0" + hh : hh;
      let sm = date.getMinutes();
      sm = sm < 10 ? "0" + sm : sm;
      let ss = date.getSeconds();
      ss = ss < 10 ? "0" + ss : ss;
      // 将年月日时分秒返回出去
      //   return `${yy}-${mm}-${dd} ${hh}:${sm}:${ss}`
      return `${yy}-${mm}-${dd}`;
    },
  },
};
</script>
<!-- 只在当前组件中生效，不会影响全局 -->
<!-- 默认语言是css,改成scss -->
<style lang="scss" scoped>
/* css语法 */
/* id为box的后代 */
/* 
    #box span{}
    #box button{} 
    #box>table{}
*/
#box {
  // id为box的儿子table标签
  > table {
    width: 800px;
    text-align: center;
    border-collapse: collapse;
    margin: 20px auto;
    tr {
      th {
        padding: 5px 0;
      }
      td {
        padding: 5px 0;
        span {
          margin: 0 5px;
          cursor: pointer;
          &:nth-child(1) {
            color: red;
          }
          &:nth-child(2) {
            color: blue;
          }
          &:nth-child(3) {
            color: green;
          }
          &:hover {
          }
        }
      }
    }

    thead {
      background: rgb(0, 133, 199);
      color: #fff;
    }
  }
  button {
    background: rgb(0, 133, 199);
    padding: 5px 25px;
    border: 0;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  }
  .boxM {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    .box-matter {
      width: 300px;
      position: relative;
      background: #fff;
      border-radius: 5px;
      text-align: center;
      h4 {
        padding: 5px 0;
        margin: 0;
        span {
          position: absolute;
          right: 15px;
          top: 10px;
          cursor: pointer;
        }
      }
      .from {
        padding: 0 35px;
        p {
          text-align: left;
          button {
            &:last-child {
              margin-left: 15px;
              background: #aaa;
            }
          }
          &:last-child {
            text-align: center;
          }
        }
      }
    }
  }
}
</style>